<template>
	<view>
		<navbar :title="isPoints?'积分兑换':'支付详情'" />
		<view class="addres border-box v-details-card flex align-item_center">
			<image src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/9.png" />
			<view class="info" v-if="defaultAddress" @click="selectAddress">
				<view>{{defaultAddress.areaName}} {{defaultAddress.detailAddress}}</view>
				<u-gap height="10rpx"></u-gap>
				<view>{{defaultAddress.name}} {{defaultAddress.mobile}}</view>
			</view>
			<view class="info" @click="selectAddress" v-else>请点击选择默认地址</view>
		</view>
		<view class="mp-header border-box v-details-card flex justify-content_space-between align-item_center"
			v-if='isPoints'>
			<view class="left flex align-item_center">
				<image src="https://mall-admin.xinjiafu.net/mini-static/images/points/16.png" />
				<view>可用积分</view>
			</view>
			<view class="right">{{user.info.point || 0}}</view>
		</view>
		<view class="mp-exchange border-box v-details-card">
			<view class="title">{{isPoints?"兑换":"支付"}}信息</view>
			<u-gap height="10rpx"></u-gap>
			<view v-for="item in productDetail" :key="item.skuId" class="items">
				<view class="item">商品名称：<text>{{item.spuName}}</text></view>
				<view class="item">{{ isPoints?'所需积分':'所需金额'}}：<text>{{fen2yuan(item?.price,isPoints?0:2)}}</text></view>
				<view class="item">购买数量：<text>x{{item.count}}</text></view>
			</view>
			<u-gap height="30rpx"></u-gap>
			<view class='title'>总支付：{{ fen2yuan(prices.payPrice,(isPoints?0:2)) }}</view>
		</view>
		<view class="mp-instructions mp-exchange v-details-card border-box" v-if="isPoints">
			<view class="title">兑换信息</view>
			<view class="content">
				<view>1.请仔细核对您要兑换的商品信息。</view>
				<view>2.兑换成功后无法退回。</view>
				<view>3.兑换额度不可大于可以用额度。</view>
			</view>
		</view>
		<view class="mp-confirm fixed" @click="pay">确认{{isPoints?"兑换":"支付"}}</view>
	</view>
</template>

<script setup>
	import navbar from "@/components/navbar.vue"
	import SpuApi from "@/sheep/api/product/spu.js"
	import userApi from "@/api/member/user.js"
	import {
		navigateTo
	} from "@/utils/tool.js"
	import {
		fen2yuan,
	} from '@/sheep/hooks/useGoods.js';
	import {
		reactive,
		ref,
		computed
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		msg
	} from "@/utils/tool.js"
	import AddressApi from "@/sheep/api/member/address.js"
	import OrderApi from "@/sheep/api/trade/order.js"
	import sheep from '@/sheep';

	const isPoints = computed(() => orderType.value === 'points')

	const selectAddress = () => {
		navigateTo("/user/setting_address/index")
	}

	const user = reactive({
		info: {
			point: 0,
		}
	})

	const userGet = () => {
		userApi.get().then(res => {
			if (res.code === 0) {
				user.info = res.data;
			}
		})
	}

	const pay = () => {
		if (!defaultAddress.value) return msg("请选择默认地址")
		if (isPoints.value) {
			if (user.info.point < +fen2yuan(productDetail.value?.price || 0)) return msg("积分不足")
		}

		const data = {
			addressId: defaultAddress.value.id,
			deliveryType: 1,
			type: isPoints.value ? 4 : 0,
			pointStatus: false,
			items: items.value
		}
		OrderApi.createOrder(data).then(res => {
			if (isPoints.value) updatePaid(res)
			else {
				uni.setStorageSync("wechat", 2)
				sheep.$platform.pay('wechat', 'goods', res.data.payOrderId);
			}
		})
	}

	// 积分支付
	const updatePaid = (res) => {
		OrderApi.updatePaid({
			merchantOrderId: res.data.id
		}).then(res => {
			if (res.code === 0) {
				uni.redirectTo({
					url: `/user/pay_result/index?status=${res.data}&type=1`
				})
			}
		})
	}

	const defaultAddress = ref(null)
	const prices = ref(null);
	const addressDefault = () => {
		AddressApi.getAddressDefault().then(res => {
			defaultAddress.value = res.data;
		})
	}

	const productDetail = ref([])
	const productId = ref();
	const spuDetails = () => {
		SpuApi.getSpuDetail(productId.value).then(res => {
			productDetail.value = res.data;
		})
	}

	const settlementOrder = () => {
		const data = {
			items: items.value,
			pointStatus: false,
			deliveryType: 1
		}
		OrderApi.settlementOrder(data).then(res => {
			defaultAddress.value = res.data.address;
			productDetail.value = res.data.items
			prices.value = res.data.price
		})
	}


	const items = ref([]);
	const orderType = ref('points')

	onLoad((option) => {
		items.value = JSON.parse(option.items)
		productId.value = option.id
		if (option.type) orderType.value = option.type
		userGet()
		// spuDetails()
	})
	onShow(() => {
		settlementOrder()
		// addressDefault()
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.addres {
		padding: 26rpx;
		margin: 20rpx auto 0;

		.info {
			view {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(64, 3, 3, 1);
			}
		}

		image {
			width: 40rpx;
			height: 44rpx;
			margin-right: 18rpx;
		}
	}

	.mp-confirm {
		left: 50%;
		transform: translateX(-50%);
		bottom: 150rpx;
		width: 710rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 100rpx;
		background: #A72530;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(245, 245, 245, 1);
	}

	.mp-instructions {
		.content {
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(64, 3, 3, 1);
		}
	}

	.mp-exchange {
		padding: 18rpx 26rpx 32rpx;
		margin: 20rpx auto 0;

		.items {}

		.items:not(:first-child) {
			margin-top: 15rpx;
		}

		.item {
			padding: 10rpx 0;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(102, 102, 102, 1);

			text {
				margin-left: 60rpx;
				color: rgba(64, 3, 3, 1);
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: rgba(64, 3, 3, 1);
		}
	}

	.mp-header {
		padding: 26rpx 52rpx 26rpx 26rpx;
		margin: 20rpx auto 0;

		.right {
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: rgba(64, 3, 3, 1);
		}

		.left {
			view {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(64, 3, 3, 1);
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx + 8rpx;
			}
		}
	}
</style>